import NavBarAgain from "@/components/NavBarAgain.jsx";
import NewsItem from "@/components/NewsItem.jsx";
import './Store.scss'
import {action} from "@/store/action/index.js";
import {connect} from "react-redux";
import {SwipeAction, Toast} from "antd-mobile";
import {useEffect} from "react";
import SkeletonAgain from "@/components/SkeletonAgain.jsx";
import {delStore} from "@/api/index.js";

const Store = function Store(props) {
    const {list: storeList, queryStoreListAsync, delStoreById} = props;

    useEffect(() => {
        if (!storeList) queryStoreListAsync();
    }, []);
const handleRemove = async (id) => {
    try{
        let {code} = await delStore(id)
        if (code === '200') {
            delStoreById(id)
            Toast.show({
                icon: "success",
                content: "删除成功",
            })
        }
    }catch (e){
        Toast.show({
            icon: "fail",
            content: "删除失败",
        })
    }
}
    return <div className="store-box">
        <NavBarAgain title={'我的收藏'}/>
        {!storeList ? <SkeletonAgain/> :
            <div className="store-list">
                {/* eslint-disable-next-line react/prop-types */}
                {storeList.map(item => {
                    return <SwipeAction rightActions={[{
                        key: 'delete',
                        text: '删除',
                        color: 'danger',
                        onClick:()=> handleRemove(item.id)
                    }]} key={item.id}>
                        <NewsItem info={item}></NewsItem>
                    </SwipeAction>
                })}

            </div>}
    </div>
}
export default connect(state => state.store, {
    ...action.store
})(Store)